<script setup>
import { ref, watch, computed } from 'vue'
import { useCommonStore } from '@/stores'
const commonStore = useCommonStore()

defineProps({ labels: { type: Object, default: [] } })
const emit = defineEmits(['change', 'sort'])

// 切换label
const currentLabel = ref(0)
const onChange = (id) => {
  if (currentLabel.value === id) return
  emit('change', id)
  currentLabel.value = id
}

// 切换排序方式
const currentSort = ref('time')
const onChangeSort = (sort) => {
  if (currentSort.value === sort) return
  currentSort.value = sort
  emit('sort', sort)
}

// 计算线条位置
const lineLeft = computed(() => {
  const MAP = { time: '0%', like: '33.3%', comment: '66.6%' }
  return MAP[currentSort.value]
})
// 切换墙
watch(
  () => commonStore.currentWall,
  () => {
    currentLabel.value = 0
  }
)
</script>

<template>
  <div class="zy-label">
    <!-- 排序方式 -->
    <div class="sort-container">
      <div class="sort-item" @click="onChangeSort('time')">按时间</div>
      <div class="sort-item" @click="onChangeSort('like')">按点赞</div>
      <div class="sort-item" @click="onChangeSort('comment')">按评论</div>
      <div class="line" :style="{ left: lineLeft }"></div>
    </div>
    <div class="item" :class="{ active: currentLabel === 0 }" @click="onChange(0)">全部</div>
    <div
      class="item"
      :class="{ active: currentLabel === item.id }"
      v-for="item in labels"
      :key="item.id"
      @click="onChange(item.id)"
    >
      {{ item.name }}
    </div>
    <!-- 占位 -->
    <div class="blank"></div>
  </div>
</template>

<style lang="scss" scoped>
.zy-label {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  margin: 40px 0 26px 0;
  .item {
    height: 28px;
    padding: 0 14px;
    line-height: 28px;
    margin: 4px;
    color: var(--gray-text-1);
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 16px;
  }
  .active {
    color: var(--primary-text);
    font-weight: 600;
    border-color: var(--primary-text);
  }
}
.sort-container {
  width: 160px;
  height: 36px;
  display: flex;
  margin-right: 40px;
  align-items: center;
  position: relative;
  .sort-item {
    color: var(--primary-text);
    width: 33%;
    margin: 5px 5px 3px;
    cursor: pointer;
  }
  .line {
    background-color: var(--primary-color);
    width: 33%;
    height: 2px;
    border-radius: 1px;
    position: absolute;
    left: 0;
    bottom: 3px;
    transition: var(--tr);
    transform: scaleX(0.5);
  }
}
.blank {
  width: 160px;
  margin-left: 40px;
}
</style>
